<template>
    <view>
        <view class="VerticalBox">
            <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="VerticalNavTop" style="height: calc(100vh - 75rpx)">
                <view :class="'cu-item ' + (1 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="1">行业类别</view>

                <view :class="'cu-item ' + (2 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="2">薪资</view>

                <view :class="'cu-item ' + (3 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="3">学历</view>

                <view :class="'cu-item ' + (4 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="4">工作经验</view>

                <view :class="'cu-item ' + (5 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="5">性别要求</view>
				
				<view :class="'cu-item ' + (6 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="6">毕业学校
				</view>
				
				<view :class="'cu-item ' + (7 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="7">专业
				</view>
				
				<view :class="'cu-item ' + (8 == TabCur ? 'text-green cur' : '')" @tap="tabSelect" data-id="8">毕业时间
				</view>
            </scroll-view>

            <scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height: calc(100vh - 75rpx)" :scroll-into-view="'main-' + MainCur" @scroll="VerticalMain">
                <view class="padding-top padding-lr" id="main-1">
                    <view class="cu-bar">
                        <view class="action" style="font-size: 14px; margin-bottom: 20rpx">行业类别</view>
                    </view>
                    <view class="lists">
                        <view :class="'item ' + (cateid == item.id ? 'bred' : '') + ' '" @tap="toCateType" :data-id="item.id" v-for="(item, index) in jobcate" :key="index">
                            {{ item.name }}
                        </view>
                    </view>
                </view>

                <view class="padding-top padding-lr" id="main-2">
                    <view class="cu-bar">
                        <view class="action" style="font-size: 14px; margin-bottom: 20rpx">薪资</view>
                    </view>
                    <view class="lists">
                        <view :class="'item ' + (priceid == item.name ? 'bred' : '') + ' '" @tap="toPriceType" :data-id="item.name" v-for="(item, index) in jobprice" :key="index">
                            {{ item.name }}
                        </view>
                    </view>
                </view>

                <view class="padding-top padding-lr" id="main-3">
                    <view class="cu-bar">
                        <view class="action" style="font-size: 14px; margin-bottom: 20rpx">学历</view>
                    </view>
                    <view class="lists">
                        <view :class="'item ' + (edu == '初中' ? 'bred' : '')" @tap="toEdu" data-id="初中">初中</view>
                        <view :class="'item ' + (edu == '高中' ? 'bred' : '')" @tap="toEdu" data-id="高中">高中</view>
                        <view :class="'item ' + (edu == '中技' ? 'bred' : '')" @tap="toEdu" data-id="中技">中技</view>
                        <view :class="'item ' + (edu == '中专' ? 'bred' : '')" @tap="toEdu" data-id="中专">中专</view>
                        <view :class="'item ' + (edu == '大专' ? 'bred' : '')" @tap="toEdu" data-id="大专">大专</view>
                        <view :class="'item ' + (edu == '本科' ? 'bred' : '')" @tap="toEdu" data-id="本科">本科</view>
                        <view :class="'item ' + (edu == '硕士' ? 'bred' : '')" @tap="toEdu" data-id="硕士">硕士</view>
                        <view :class="'item ' + (edu == '博士' ? 'bred' : '')" @tap="toEdu" data-id="博士">博士</view>
                        <view :class="'item ' + (edu == '博后' ? 'bred' : '')" @tap="toEdu" data-id="博后">博后</view>
                    </view>
                </view>

                <view class="padding-top padding-lr" id="main-4">
                    <view class="cu-bar">
                        <view class="action" style="font-size: 14px; margin-bottom: 20rpx">工作经验</view>
                    </view>
                    <view class="lists">
                        <view :class="'item ' + (express == '无经验' ? 'bred' : '')" @tap="toExpress" data-id="无经验">无经验</view>
                        <view :class="'item ' + (express == '1年以下' ? 'bred' : '')" @tap="toExpress" data-id="1年以下">1年以下</view>
                        <view :class="'item ' + (express == '1-3年' ? 'bred' : '')" @tap="toExpress" data-id="1-3年">1-3年</view>
                        <view :class="'item ' + (express == '3-5年' ? 'bred' : '')" @tap="toExpress" data-id="3-5年">3-5年</view>

                        <view :class="'item ' + (express == '5-10年' ? 'bred' : '')" @tap="toExpress" data-id="5-10年">5-10年</view>
                        <view :class="'item ' + (express == '10年以上' ? 'bred' : '')" @tap="toExpress" data-id="10年以上">10年以上</view>
                    </view>
                </view>

                <view class="padding-top padding-lr" id="main-5">
                    <view class="cu-bar">
                        <view class="action" style="font-size: 14px; margin-bottom: 20rpx">性别要求</view>
                    </view>
                    <view class="lists">
                        <view :class="'item  ' + (sex == 0 ? 'bred' : '')" @tap="toSex" data-id="0">男女不限</view>
                        <view :class="'item ' + (sex == 1 ? 'bred' : '')" @tap="toSex" data-id="1">限男性</view>
                        <view :class="'item ' + (sex == 2 ? 'bred' : '')" @tap="toSex" data-id="2">限女性</view>
                    </view>
                </view>
				<view class="padding-top padding-lr" id="main-6">
					<view class="cu-bar">
						<view class="action" style="font-size: 14px; margin-bottom: 20rpx">毕业学校</view>
					</view>
					<view class="wid90 mar bacFFF borRad40">
						<input class="foSi28 wid90 mar hei80" v-model="school" placeholder="请输入毕业院校"/>
					</view>
				</view>
				<view class="padding-top padding-lr" id="main-7">
					<view class="cu-bar">
						<view class="action" style="font-size: 14px; margin-bottom: 20rpx">专业</view>
					</view>
					<view class="wid90 mar bacFFF borRad40">
						<input class="foSi28 wid90 mar hei80" v-model="vocation" placeholder="请输入专业"/>
					</view>
				</view>
				<view class="padding-top padding-lr" id="main-8">
					<view class="cu-bar">
						<view class="action" style="font-size: 14px; margin-bottom: 20rpx">毕业时间</view>
					</view>
					<view class="wid90 mar bacFFF borRad40">
						<picker class="wh100" mode="date" :value="enddateschool" @change="bindDateChange">
							<view class="foSi28 wid90 mar dis disAl hei80">{{enddateschool || '请选择毕业时间'}}</view>
						</picker>
					</view>
				</view>
            </scroll-view>
        </view>

        <view class="weixinmao-float">
            <view class="weixinmao-foot">
                <view class="footer" @tap="toReastJob" :data-id="data.companyid">重置</view>

                <view class="footer" @tap="toSearchJob">查询简历</view>
            </view>
        </view>
    </view>
</template>

<script>
import { Note } from '../findworker/note-model.js';
var note = new Note();
import { Job } from '../../model/job-model.js';
var job = new Job();
export default {
    data() {
        return {
            TabCur: 1,
            MainCur: 0,
            VerticalNavTop: 0,
            list: [],
            load: true,
            cateid: 0,
            priceid: '',
            edu: '',
            express: '',
            sex: '',
            special: '',
            jobcate: '',
            jobprice: '',
            listCur: '',
            notecount: 0,
            jobcount: 0,
			school: '',
			vocation: '',
			enddateschool: '',

            data: {
                companyid: ''
            }
        };
    },
    onLoad() {
        var that = this;
        uni.setNavigationBarTitle({
            title: '简历筛选'
        });
        uni.showLoading({
            title: '加载中...',
            mask: true
        });
        var params = {};
        job.selectJobInit((data) => {
            that.setData({
                jobcate: data.jobcatelist,
                jobprice: data.jobpricelist
            });
        }, params);
        let list = [{}];
        for (let i = 0; i < 26; i++) {
            list[i] = {};
            list[i].name = String.fromCharCode(65 + i);
            list[i].id = i;
        }
        this.setData({
            list: list,
            listCur: list[0],
            notecount: 0
        });
    },
    onReady() {
        uni.hideLoading();
    },
    methods: {
		bindDateChange(e){
			this.enddateschool = e.detail.value
		},
        toReastJob: function () {
            var that = this;
            that.cateid = 0;
            that.priceid = 0;
            that.edu = '';
            that.express = '';
            that.sex = -1;
            that.special = '';
			 that.school = '';
			 that.vocation  = '';
			 that.enddateschool = '';
            that.setData({
                cateid: that.cateid,
                priceid: that.priceid,
                edu: that.edu,
                express: that.express,
                sex: that.sex,
                special: that.special,
                jobcount: 0,
				school: '',
				vocation: '',
				enddateschool: ''
            });
            //  that.getjoblist();
        },

        getjoblist: function () {
            var that = this;
            var params = {
                cateid: that.cateid,
                priceid: that.priceid,
                eduid: that.edu,
                express: that.express,
                sex: that.sex,
                special: that.special,
				school: that.school,
				vocation: that.vocation,
				enddateschool: that.enddateschool
            };
			
            note.getNoteListCount((data) => {
                that.setData({
                    notecount: data.notecount
                });
            }, params);
        },

        tabSelect(e) {
            this.setData({
                TabCur: e.currentTarget.dataset.id,
                MainCur: e.currentTarget.dataset.id,
                VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
            });
        },

        toCateType: function (e) {
            var that = this;
            var cateid = e.currentTarget.dataset.id;
            if (that.cateid == cateid) {
                cateid = 0;
            }
            that.cateid = cateid;
            that.setData({
                cateid: cateid
            });
            that.getjoblist();
        },

        toPriceType: function (e) {
            var that = this;
            var priceid = e.currentTarget.dataset.id;
            if (that.priceid == priceid) {
                priceid = 0;
            }
            that.priceid = priceid;
            that.setData({
                priceid: priceid
            });
            that.getjoblist();
        },

        toEdu: function (e) {
            var that = this;
            var edu = e.currentTarget.dataset.id;
            if (that.edu == edu) {
                edu = '';
            }
            that.edu = edu;
            console.log(edu);
            that.setData({
                edu: edu
            });
            that.getjoblist();
        },

        toExpress: function (e) {
            var that = this;
            var express = e.currentTarget.dataset.id;
            if (that.express == express) {
                express = '';
            }
            that.express = express;
            console.log(express);
            that.setData({
                express: express
            });
            that.getjoblist();
        },

        toSex: function (e) {
            var that = this;
            var sex = e.currentTarget.dataset.id;
            if (that.sex == sex) {
                sex = '';
            }
            that.sex = sex;
            console.log(sex);
            that.setData({
                sex: sex
            });
            that.getjoblist();
        },

        toSpecial: function (e) {
            var that = this;
            var special = e.currentTarget.dataset.id;
            if (that.special == special) {
                special = '';
            }
            that.special = special;
            that.setData({
                special: special
            });
            that.getjoblist();
        },

        toSearchJob: function () {
            var that = this;
            var cateid = that.cateid;
            var priceid = that.priceid;
            var edu = that.edu;
            var express = that.express;
            var sex = that.sex;
            var special = that.special;
			var school = that.school;
			var vocation  = that.vocation;
			var enddateschool = that.enddateschool;
            uni.navigateTo({
                url: '/pages/searchnote/index?cateid=' + cateid + '&priceid=' + priceid + '&edu=' + edu +
				 '&express=' + express + '&sex=' + sex + '&special=' + special+ '&school=' + school + '&vocation=' + vocation + '&enddateschool=' + enddateschool
            });
        },

        VerticalMain(e) {
            let that = this;
            let list = this.list;
            let tabHeight = 0;
            if (this.load) {
                for (let i = 0; i < list.length; i++) {
                    let view = uni
                        .createSelectorQuery()
                        .in(uni)
                        .select('#main-' + list[i].id);
                    view.fields(
                        {
                            size: true
                        },
                        (data) => {
                            list[i].top = tabHeight;
                            tabHeight = tabHeight + data.height;
                            list[i].bottom = tabHeight;
                        }
                    ).exec();
                }
                that.setData({
                    load: false,
                    list: list
                });
            }
            let scrollTop = e.detail.scrollTop + 20;
            for (let i = 0; i < list.length; i++) {
                if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
                    that.setData({
                        VerticalNavTop: (list[i].id - 1) * 50,
                        TabCur: list[i].id
                    });
                    return false;
                }
            }
        }
    }
};
</script>
<style>
/* pages/selectcars/index.wxss */
.VerticalNav.nav {
    width: 200rpx;
    white-space: initial;
}

.VerticalNav.nav .cu-item {
    width: 100%;
    text-align: center;
    background-color: #fff;
    margin: 0;
    border: none;
    height: 50px;
    position: relative;
}

.VerticalNav.nav .cu-item.cur {
    background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
    content: '';
    width: 8rpx;
    height: 30rpx;
    border-radius: 10rpx 0 0 10rpx;
    position: absolute;
    background-color: currentColor;
    top: 0;
    right: 0rpx;
    bottom: 0;
    margin: auto;
}
.VerticalBox {
    display: flex;
}
.VerticalMain {
    background-color: #f1f1f1;
}

.lists {
    width: 500rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.lists .item {
    padding: 20rpx;
    background: #fff;
    border-radius: 40rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10rpx;
}

.weixinmao-float {
    height: 150rpx;
}
.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    background: #ffffff;
}

button::after {
    border: none;
}

.weixinmao-foot > view:nth-child(1) {
    color: #fd6a36;
    align-self: center;
    width: 220rpx;
    height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #fd6a36;
    border-radius: 50rpx;
    margin-right: 10rpx;
}
.black {
    color: #777676;
}
.red {
    color: red;
}
.bred {
    color: #fd6a36;
    border: 1rpx solid #fd6a36;
}
.weixinmao-foot > view:nth-child(2) {
    color: #fff;
    align-self: center;
    width: 420rpx;
    height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fd6a36;
    border-radius: 50rpx;
}

.weixinmao-foot view image {
    width: 100rpx;
    height: 100rpx;
    align-self: center;
}
.lxname {
    width: 180rpx;
    padding: 20rpx;
    height: 50rpx;
    border-radius: 60rpx;
    color: #ffffff;
    font-size: 12px;
    background: #4ca7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
}

.footerbutton {
    background: #fe552e;
}
</style>
